<docs>
  ## 消息弹出框组件
  ## props
  * message 提示内容
  * btnText 按钮文案
</docs>
<template>
  <div :class="`weui-cell weui-cell_access data-picker1 ${valid === status.REJECTED ? 'weui-cell_warn' : ''}`"
   >
    <div class="weui-cell__hd">
      <p class="weui-label">{{label}}</p>
    </div>
    <div class="weui-cell__ft text" @click="selectDate('single')">{{labelName || value}}</div>
    <van-calendar v-model="show" type="range" :max-range="30" @confirm="onConfirm" />
  </div>
</template>
<script>
import { mixinValid } from 'common/mixins/mixins';
import dayjs from 'dayjs';
export default {
  name: 'date-inteval',
  props: {
    label: String,
    prop: String,
    value: String,
    rules: Object
  },
  mixins: [mixinValid],
  data() {
    return {
      show: false,
      date:"",
      labelName: '',
      mode: 'single',
    };
  },
  methods: {
    selectDate(mode) {
      this.show = true;
      this.mode = mode;
      this.date = '';
    },
    formatDate(date) {
      const year = date.getYear()<1900?1900+date.getYear():date.getYear();
      const mon = date.getMonth() + 1;
      const day = date.getDate();

      return `${year}-${mon<10?'0'+mon:mon}-${day<10?'0'+day:day}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      const min = this.formatDate(start);
      const max = this.formatDate(end);
      this.labelName = `${this.formatDate(start)} 至 ${this.formatDate(end)}`;

      this.$emit('input', min);
      this.$emit('update:maxDate', max);
      this.$nextTick(() => {
        this.validItem();
      });
    },
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}
.text {
  text-align: left;
  flex: 1 1 auto;
  height: 45px;
  line-height: 45px;
  color: #000;
  font-size: 14px;
  overflow: hidden;
  @include input-text;
}
.data-picker1 /deep/ .van-calendar__popup  {
  .van-calendar__header-title,
  .van-button--normal{
    font-size:30px;
  }
  .van-calendar__header-subtitle ,
  .van-calendar__weekdays ,
  .van-calendar__day,
  .van-calendar__month-title{
    font-size:26px;
  }
  .van-calendar__bottom-info{
    font-size:20px;
    bottom: 2px;
  }
  .van-calendar__confirm{
    height: 75px;
    line-height:75px;
  }

  .van-calendar__month{
    // padding-bottom: 700px;
  }
}

</style>
